<template>
  <div class="app-container">
    <div v-show="tab_view==1" class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item>
          <el-date-picker
            style="width:240px"
            v-model="pickerDate"
            value-format="yyyy-MM-dd"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            :clearable="false"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">门店：</span>
          <el-select
            placeholder="选择门店"
            v-model="formInline.store_id"
            style="width:300px"
            filterable
          >
            <el-option
              v-for="item in store_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">类型：</span>
          <el-select v-model="formInline.second_type" style="width:100px">
            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">状态：</span>
          <el-select v-model="status" multiple collapse-tags style="width:140px">
            <el-option
              v-for="item in status_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.name"
            placeholder="请输入名称"
            style="width:150px;"
            clearable
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
        <el-button class="pull-right" type="primary" size="small" @click="addTypeClick()">新增券</el-button>
      </el-form>
      <el-table
        highlight-current-row
        :data="list"
        border
        size="mini"
        @sort-change="tableSort"
        v-loading.body="listLoading"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">{{scope.$index+1+(currentPage-1)*20}}</template>
        </el-table-column>
        <el-table-column align="center" label="券名称" prop="name"></el-table-column>
        <el-table-column align="center" label="类型" prop="second_type">
          <template slot-scope="scope">{{scope.row.second_type|couponType}}</template>
        </el-table-column>
        <el-table-column align="center" label="券说明" prop="describe"></el-table-column>
        <el-table-column align="center" label="更新时间" prop="update_time" sortable="custom"></el-table-column>
        <el-table-column align="center" label="状态" prop="status"></el-table-column>
        <el-table-column align="center" label="操作" width="330">
          <template slot-scope="scope">
            <el-button
              @click="infoClick(3,scope.row.coupons_id,scope.row.second_type)"
              type="primary"
              plain
              size="mini"
            >详情</el-button>
            <el-button
              @click="infoClick(2,scope.row.coupons_id,scope.row.second_type)"
              type="primary"
              plain
              size="mini"
            >修改</el-button>
            <el-button @click="goSale(2,scope.row.coupons_id)" type="primary" plain size="mini">查看销售</el-button>
            <el-button @click="goSale(1,scope.row.coupons_id)" type="primary" plain size="mini">新建销售</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="tab_view==2" class="customContainer">
      <el-button class="pull-left" type="primary" size="small" @click="backClick">返 回</el-button>
      <div class="tab_title">{{top_title}}</div>
      <div v-show="isNew">
        <dj-tab :data="step_list" :isNew="isNew" :tab_step="tab_step" @goStep="goStep"></dj-tab>
      </div>
      <div v-show="tab_step==1" class="info">
        <el-form
          :model="infoForm"
          ref="infoForm"
          :rules="rules"
          :disabled="isNew==3||isDisabled"
          label-width="80px"
        >
          <el-form-item label="名称" prop="name">
            <el-input
              :disabled="isSelled"
              :maxlength="20"
              placeholder="请输入名称"
              v-model="infoForm.name"
              style="width:90%"
            ></el-input>
          </el-form-item>
          <el-form-item label="说明" prop="describe">
            <el-input
              :disabled="isSelled"
              type="textarea"
              :maxlength="150"
              :rows="3"
              v-model="infoForm.describe"
              style="width:90%"
            ></el-input>
          </el-form-item>

          <el-form-item label="优先级" prop="priority">
            <el-input :maxlength="3" v-model.number="infoForm.priority" style="width:120px;"></el-input>
            <span style="margin-left:10px">填写1~999的数字，数字越小，优先级越高</span>
          </el-form-item>
          <div class="info_optional">
            <div class="op_title">获得方式（至少勾选一项）</div>
            <el-form-item label-width="0" prop="typeA">
              <el-checkbox-group v-model="infoForm.typeA" >
                <el-col :span="8">
                  <el-form-item label="" prop="pay_money1">
                    <el-checkbox label="现金购买" name="typeA" :disabled="isSelled">
                      <span>现金购买</span>
                      <div style="display: inline-block" v-show="infoForm.typeA.includes('现金购买')">
                        <el-input
                            :disabled="isSelled"
                            :maxlength="8"
                            v-model="infoForm.pay_money"
                            style="width:120px;margin-left:10px"
                        ></el-input>
                        <span style="margin-left: 5px;color: #000">元</span>
                      </div>
                    </el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="" prop="pay_score">
                    <el-checkbox label="积分兑换" name="typeA" :disabled="isSelled">
                      <span>积分兑换</span>
                      <div style="display: inline-block" v-show="infoForm.typeA.includes('积分兑换')">
                        <el-input
                            :disabled="isSelled"
                            :maxlength="8"
                            v-model="infoForm.pay_score"
                            style="width:120px;margin-left:10px"
                        ></el-input>
                        <span style="margin-left: 5px;color: #000">分</span>
                      </div>
                    </el-checkbox>
                  </el-form-item>
                </el-col>
            </el-checkbox-group>
            </el-form-item>
          </div>

          <div class="info_optional">
            <div class="op_title">使用规则</div>
            <el-form-item label-width="0">
              <el-col :span="8">
                <el-form-item label="抵扣金额" prop="discount_money">
                  <el-input
                    :disabled="isSelled"
                    :maxlength="8"
                    v-model="infoForm.discount_money"
                    style="width:120px;margin-right:10px"
                  ></el-input>元
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="使用门槛" prop="threshold">
                  <el-input
                    :disabled="isSelled"
                    :maxlength="8"
                    v-model="infoForm.threshold"
                    style="width:120px;margin-right:10px"
                  ></el-input>元
                </el-form-item>
              </el-col>
            </el-form-item>
          </div>

          <div class="info_optional">
            <div class="op_title">标签（选填）</div>
            <el-form-item label-width="0" prop="tab">
              <el-checkbox-group v-model="infoForm.tab">
                <el-checkbox v-for="item in tab_list" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <div class="op_title">角标（选填）</div>
            <el-form-item label-width="0" prop="corner_mark">
              <el-radio-group v-model="infoForm.corner_mark">
                <el-radio
                  @click.native.prevent="cornerClick(item.id)"
                  v-for="item in corner_list"
                  :label="item.id"
                  :key="item.id"
                >{{item.name}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div v-show="tab_step==2" class="info goods">
        <el-radio
          :disabled="isNew==3||isDisabled||isSelled"
          @change="goodsRadioChange"
          v-model="goodsRadio"
          label="0"
        >全部商品</el-radio>
        <el-radio
          :disabled="isNew==3||isDisabled||isSelled"
          @change="goodsRadioChange"
          v-model="goodsRadio"
          label="1"
        >选择指定商品</el-radio>
        <el-radio
          :disabled="isNew==3||isDisabled||isSelled"
          @change="goodsRadioChange"
          v-model="goodsRadio"
          label="2"
        >按类型选择商品</el-radio>
        <div v-show="goodsRadio==='0'" class="store_info">
          <span>全部商品都可使用该券</span>
        </div>
        <div v-show="goodsRadio==='1'" class="goods_info">
          <div class="title">已添加商品：{{add_goods_list.length}}</div>
          <div class="check_meal">
            <div class="check_meal_list">
              <div
                class="check_meal_item"
                :class="{old:g.isOld==1,disabled:isDisabled||(isSelled&&g.isOld==1)}"
                v-for="(g,i) of add_goods_list"
                :key="g.goods_id"
              >
                <span>{{g.name}}</span>
                <span class="el-icon-close" @click="delCheck(i,isDisabled||(isSelled&&g.isOld==1))"></span>
              </div>
            </div>
          </div>
          <el-form :inline="true" :model="goodsForm" ref="goodsForm" size="small">
            <el-form-item prop="store_id">
              <span style="color: #888;">门店：</span>
              <el-select v-model="goodsForm.store_id" style="width:300px" filterable>
                <el-option
                  v-for="item in choose_store_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="type">
              <span style="color: #888;">类型：</span>
              <el-select v-model="goods_type" multiple collapse-tags style="width:130px">
                <el-option
                  v-for="item in goods_type_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                v-model="goodsForm.name"
                placeholder="请输入商品名称"
                @keyup.enter.native="goodsSearchClick"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <dj-button size="small" @search="goodsSearchClick">
                <template #default>搜索</template>
              </dj-button>
            </el-form-item>
          </el-form>
          <el-table
            class="goods_table"
            ref="allGoodsList"
            @selection-change="goodsSelect"
            highlight-current-row
            :data="all_goods_list"
            height="400px"
            border
            size="mini"
            v-loading.body="listLoading"
          >
            <el-table-column
              align="center"
              type="selection"
              :selectable="goodsSelectable"
              width="50"
            />
            <el-table-column align="center" label="商品名称" prop="name"></el-table-column>
            <el-table-column align="center" label="类型" prop="type_name"></el-table-column>
            <el-table-column align="center" label="更新时间" prop="update_time"></el-table-column>
            <el-table-column align="center" label="状态" prop="status"></el-table-column>
          </el-table>
          <el-pagination
            background
            @current-change="goodsCurrentChange"
            :current-page.sync="goodsPage"
            :page-size="20"
            layout="prev, pager, next, jumper"
            :total="goodsTotal"
          ></el-pagination>
        </div>
        <div v-show="goodsRadio==='2'" class="goods_type">
          <el-checkbox-group :disabled="isNew==3" v-model="goodsType">
            <el-checkbox
              :disabled="item.disabled||isDisabled"
              v-for="item in goods_type_list"
              :label="item.id"
              :key="item.id"
            >{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div v-show="tab_step==3" class="info goods">
        <el-radio
          :disabled="isNew==3||isDisabled||isSelled"
          @change="storeRadioChange"
          v-model="storeRadio"
          label="0"
        >全门店</el-radio>
        <el-radio
          :disabled="isNew==3||isDisabled||isSelled"
          @change="storeRadioChange"
          v-model="storeRadio"
          label="1"
        >跟随商品配置门店</el-radio>
        <el-radio
          :disabled="isNew==3||isDisabled||isSelled"
          @change="storeRadioChange"
          v-model="storeRadio"
          label="2"
        >独立配置门店</el-radio>
        <div v-show="storeRadio==0" class="store_info">
          <span v-show="storeRadio==='0'">全部门店，都能使用该券</span>
        </div>
        <div v-show="storeRadio==='1'" class="store_info">
          <span>能用“适用商品”的店，都能使用该券</span>
        </div>
        <div v-show="storeRadio==='2'" class="store_choose">
          <div>
            <div class="transferHeader">选择门店</div>
            <div class="transferHeader">已选门店</div>
          </div>
          <!-- <el-transfer :props="{key: 'id', label: 'name' , disabled:'disabled' }" :titles="['全选', '全选']" :button-texts="['移除', '添加']" filterable
            v-model="check_store_list" :data="choose_store_list">
          </el-transfer>-->
          <dj-transfer :data="choose_store_list" v-model="check_store_list" :disabled="isDisabled"></dj-transfer>
        </div>
      </div>
      <div v-show="tab_step==4">
        <el-form
          :disabled="isNew==3||isDisabled||isSelled"
          :model="timeForm"
          ref="timeForm"
          :rules="rules"
        >
          <div class="info goods">
            <el-radio
              :disabled="isDisabled||isSelled"
              @change="timeRadioChange"
              v-model="timeRadio"
              label="1"
            >有效期</el-radio>
            <el-radio
              :disabled="isDisabled||isSelled"
              @change="timeRadioChange"
              v-model="timeRadio"
              label="2"
            >有效时长</el-radio>
            <div class="time_info">
              <el-form-item style="margin-bottom:10px" v-show="timeRadio==1" prop="pickerTime">
                <div>
                  <el-date-picker
                    style="width:240px;margin-right:10px"
                    v-model="timeForm.pickerTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="-"
                    :clearable="false"
                    size="small"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerTimeForm"
                  ></el-date-picker>期间可使用
                </div>
                <div class="remark">可用时间为有效期开始日期的 00:00:00到截止日期的 23:59:59</div>
              </el-form-item>
              <el-form-item style="margin-bottom:10px" v-show="timeRadio==2">
                <div class="intime">
                  用户购买后
                  <el-form-item class="intime_item" prop="intime" ref="intimeForm">
                    <el-input
                      style="width:140px"
                      size="small"
                      :maxlength="4"
                      v-model.number="timeForm.intime"
                    ></el-input>
                  </el-form-item>天内有效
                </div>
                <div class="remark">可用时间为购买当天到最后一天的23:59:59，如果设置为0天内有效，即表示仅限购买当天使用</div>
              </el-form-item>
            </div>
          </div>
          <div class="info goods">
            <el-form-item prop="week" class="time_title">
              <el-checkbox @change="weekChange" label="设置可用日期" v-model="timeForm.week"></el-checkbox>
            </el-form-item>
            <el-form-item
              class="time_info time_item"
              v-show="timeForm.week"
              prop="week_day"
              ref="weekDayForm"
            >
              <el-checkbox-group v-model="timeForm.week_day">
                <el-checkbox v-for="item in weeks" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item prop="dis_day" class="time_title">
              <el-checkbox @change="disDayChange" label="设置不可用日期" v-model="timeForm.dis_day"></el-checkbox>
              <el-button
                @click="editDisDayClick"
                v-show="timeForm.dis_day&&!isDisabled&&!isSelled"
                style="margin-left:30px"
                type="text"
              >
                <i class="el-icon-date"></i> 编辑日期
              </el-button>
              <div v-show="timeForm.dis_day" class="time_info time_item">
                <div
                  v-show="timeForm.disable_date"
                  class="dis_day_text"
                >{{timeForm.disable_date}} 期间不可用</div>
                <div class="remark">不可用是指所有选中日期的全天都不可用，即00:00:00-23:59:59</div>
              </div>
            </el-form-item>
            <el-form-item prop="time" class="time_title">
              <el-checkbox @change="timeChange" label="设置可用时间" v-model="timeForm.time"></el-checkbox>
            </el-form-item>
            <el-form-item class="time_info time_item" v-show="timeForm.time" prop="clock_time">
              <el-time-picker
                size="small"
                style="width:240px"
                is-range
                :clearable="false"
                v-model="timeForm.clock_time"
                value-format="HH:mm:ss"
                range-separator="-"
              ></el-time-picker>
              <div class="remark" style="margin-bottom:10px">指一天内可使用该券的时间范围，00:00:00-23:59:59</div>
            </el-form-item>
          </div>
          <div class="info goods">
            <div class="time_info time_item" style="margin-bottom:20px">
              可使用数量：
              <span style="color:#606266">单笔订单限用1张</span>
            </div>
          </div>
        </el-form>
      </div>
      <div style="text-align:right;margin-bottom:20px">
        <el-button v-show="tab_step>1&&isNew==1" @click="tab_step--" plain size="small">上一步</el-button>
        <el-button v-show="tab_step<4&&isNew==1" @click="goNext" type="primary" size="small">下一步</el-button>
        <el-button v-show="tab_step==4&&isNew==1" @click="saveClick" type="primary" size="small">保存</el-button>
        <el-button
          v-show="isDisabled&&isNew==2&&(!isSelled||(isSelled&&tab_step<4))"
          @click="editClick(3)"
          type="primary"
          size="small"
        >修改</el-button>
        <el-button v-show="!isDisabled&&isNew==2" @click="editClick(1)" plain size="small">取消</el-button>
        <el-button
          v-show="!isDisabled&&isNew==2"
          @click="editClick(2)"
          type="primary"
          size="small"
        >保存</el-button>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      title="选择券类型"
      :visible.sync="addTypeDialog"
      width="300px"
    >
      <div class="add_type">
        <div
          v-for="item of add_type_list"
          :key="item.id"
          @click="addClick(item.id)"
          class="add_type_info"
        >{{item.name}}</div>
      </div>
    </el-dialog>
    <!-- 不可用日期弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      title="编辑不可用日期"
      :visible.sync="disDayDialog"
      width="400px"
    >
      <div class="dis_day_btn">
        <el-date-picker
          value-format="yyyy-MM-dd"
          size="small"
          v-model="current_dis_day"
          style="width:140px;margin-right:10px"
          type="date"
          placeholder="请选择日期"
        ></el-date-picker>
        <el-button @click="addDisDayClick" type="primary" size="small">添加</el-button>
      </div>
      <div class="check_meal dis_day">
        <div class="check_meal_list">
          <div class="check_meal_item" v-for="(day,i) of dis_day_list" :key="i">
            <span>{{day}}</span>
            <span class="el-icon-close" @click="delDisDay(i)"></span>
          </div>
        </div>
      </div>
      <el-button @click="clearAllDisDay" type="text" size="small">清空全部日期</el-button>
      <el-button
        class="pull-right mt10"
        :disabled="dis_day_list.length==0"
        @click="confirmDisDay"
        type="primary"
        size="small"
      >确认</el-button>
    </el-dialog>
    <!-- 自定义底部 -->
    <div v-show="tab_view==1" class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getPage,
  getList,
  getStore,
  couponsCreate,
  couponsInfo,
  couponsUpdate,
  getGoodsList,
  getGoodsPage,
} from "@/api/operation/couponManagement";
import {
  pickerOptionsF,
  pickerDateOneMonth,
  pickerOptionsGtDay,
  pickerDateDot,
  optionMaxTime,
  getGoodsType,
} from "@/utils";
import {
  commonCharName,
  money0tox,
  integer1to999,
  integer0to999999
} from "@/utils/validate";
import { djTransfer } from "@/components/transfer";
import { djTab } from "@/components/tab";
export default {
  components: {
    "dj-transfer": djTransfer,
    "dj-tab": djTab,
  },
  data() {
    const vName = (rule, value, callback) => {
      if (this.isNew != 3) {
        if (value.length < 2) {
          callback(new Error("请输入2-20位字符"));
        } else {
          if (!commonCharName(value)) {
            callback(new Error("名称不能包含特殊字符"));
          } else {
            callback();
          }
        }
      } else {
        callback();
      }
    };
    const vDes = (rule, value, callback) => {
      if (this.isNew != 3 && !value) {
        callback(new Error("请输入说明"));
      } else {
        callback();
      }
    };

    const vPmoney= (rule, value, callback) => {
      if (this.isNew != 3) {
        if (value === "") {
          callback(new Error("请输入金额"));
        } else {
          if (money0tox(value, 5)) {
            callback();
          } else {
            callback(new Error("金额只能为0-99999之间，保留2位小数"));
          }
        }
      } else {
        callback();
      }
    };

    // integer1to999999999
    const vType= (rule, value, callback) => {
      if(this.isNew != 3){
         if(this.infoForm.typeA.length!=0){
           callback();
         }else{
           callback(new Error("至少选择一项获取方式"));
         }
      }else{
        callback();
      }
    };

    const vPmoney1 = (rule, value, callback) => {
      if(this.infoForm.typeA.includes("现金购买")){
        if(!this.infoForm.pay_money){
          callback(new Error("请输入金额"));
        }else{
          if (money0tox(this.infoForm.pay_money, 5)) {
            callback();
          } else {
            callback(new Error("金额只能为0-99999之间，保留2位小数"));
          }
        }
      }else {
        callback();
      }
    }

    const vScore = (rule, value, callback) => {
      if(this.infoForm.typeA.includes("积分兑换")) {
        if(!this.infoForm.pay_score){
          callback(new Error("请输入积分"));
        }else{
          if (integer0to999999(this.infoForm.pay_score)) {
            callback();
          } else {
            callback(new Error("积分只能为0~999999之间，不能输入小数"));
          }
        }
      }else {
        callback();
      }
    }

    const vMoney0 = (rule, value, callback) => {
      if (this.isNew != 3) {
        if (value === "") {
          callback(new Error("请输入金额"));
        } else {
          if (money0tox(value, 5)) {
            callback();
          } else {
            callback(new Error("金额只能为0-99999之间，保留2位小数"));
          }
        }
      } else {
        callback();
      }
    };


    const vMoney1 = (rule, value, callback) => {
      if (this.isNew != 3) {
        if (value === "") {
          callback(new Error("请输入金额"));
        } else {
          if (value != 0 && money0tox(value, 5)) {
            callback();
          } else {
            callback(new Error("金额只能为1-99999之间，保留2位小数"));
          }
        }
      } else {
        callback();
      }
    };
    const vPri = (rule, value, callback) => {
      if (this.isNew != 3) {
        if (value === "") {
          callback(new Error("请输入优先级"));
        } else {
          if (integer1to999(value)) {
            callback();
          } else {
            callback(new Error("优先级只能为1-999之间的整数"));
          }
        }
      } else {
        callback();
      }
    };
    const vIntime = (rule, value, callback) => {
      if (this.isNew != 3 && this.timeRadio == 2) {
        if (value === "") {
          callback(new Error("请输入有效时长"));
        } else {
          if (integer0to999999(value) && value < 3651) {
            callback();
          } else {
            callback(new Error("只能为0-3650之间的整数"));
          }
        }
      } else {
        callback();
      }
    };
    const vWeekDay = (rule, value, callback) => {
      if (this.isNew != 3 && this.timeForm.week) {
        if (value.length === 0) {
          callback(new Error("请选择可用日期"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      list: null,
      listLoading: false,
      addTypeDialog: false,
      disDayDialog: false,
      isNew: 1, //1 新增 2 修改 3 详情
      isDisabled: false, //是否可修改
      isSelled: false, //销售过的部分数据不可修改
      default_store_id: "",
      tab_view: 1,
      tab_step: 1,
      top_title: "新增代金券",
      currentPage: 1,
      totalDataNumber: 0,
      store_list: [],
      choose_store_list: [], //弹窗中的门店
      status: ["1", "2", "3"],
      type_list: [
        { id: "0", name: "全部" },
        { id: "1", name: "代金券" },
      ],
      tab_list: [{ id: "1", name: "特价销售" }],
      corner_list: [
        //角标
        { id: "1", name: "店长推荐" },
        { id: "2", name: "精选热卖" },
        { id: "3", name: "限时特卖" },
        { id: "4", name: "会员专享" },
        { id: "5", name: "签到福利" },
        { id: "6", name: "生日福利" },
        { id: "7", name: "分享有礼" },
        { id: "8", name: "办卡福利" },
        // { id: "9", name: "新人专享" },
        // { id: "10", name: "限时免费" },
      ],
      status_list: [
        { id: "1", name: "待设置" },
        { id: "2", name: "未开售" },
        { id: "3", name: "销售中" },
        { id: "4", name: "已停售" },
      ],
      add_type_list: [
        { id: "1", name: "代金券" },
        { id: "2", name: "满减券" },
      ],
      step_list: ["1. 基础信息", "2. 适用商品", "3. 使用门店", "4. 使用限制"],
      formInline: {
        begin_time: "",
        end_time: "",
        store_id: "",
        second_type: "0",
        status: [],
        name: "",
        sort_by: "desc",
      },
      infoForm: {
        typeA:[],
        type: "4",
        second_type: "",
        name: "",
        describe: "",
        support_buy: 0,
        support_score:0,
        pay_money: "",
        pay_score:"",
        discount_money: "",
        threshold: "",
        corner_mark: "",
        tab: [],
        priority: "100",
      },
      id: "", //查看的券id
      update_time: "", //券更新时间
      goodsRadio: "0", //0全部商品 1选择指定商品 2按类型选择商品
      add_goods_list: [], //已添加商品列表
      choose_goods_list: [], //已选商品列表
      all_goods_list: [], //可选商品列表
      notSelect: false,
      goodsPage: 1,
      goodsTotal: 0,
      goods_type: ["2", "3", "4", "5", "6", "7"],
      goodsForm: {
        //商品搜索
        store_id: "",
        support_coupons: "1",
        status: ["1", "2", "3", "4"],
        second_type: [],
        name: "",
      },
      goodsType: [], //2办卡 3充值 4续期 5门票 6企划 7实物
      goods_type_list: [
        { id: "2", name: "办卡", disabled: false },
        { id: "3", name: "充值", disabled: false },
        { id: "4", name: "续期", disabled: false },
        { id: "5", name: "门票", disabled: false },
        { id: "6", name: "企划", disabled: false },
        { id: "7", name: "实物", disabled: false },
      ],
      storeRadio: "", //0全门店 1跟随商品配置门店 2独立配置门店
      check_store_list: [], //已选择门店
      timeRadio: "1", //1有效期 2有效时长
      weeks: [
        { id: "1", name: "周一" },
        { id: "2", name: "周二" },
        { id: "3", name: "周三" },
        { id: "4", name: "周四" },
        { id: "5", name: "周五" },
        { id: "6", name: "周六" },
        { id: "0", name: "周日" },
      ],
      timeForm: {
        //使用限制
        pickerTime: pickerDateDot(),
        intime: "",
        week: "",
        week_day: [],
        time: "",
        dis_day: "",
        clock_time: ["00:00:00", "23:59:59"], //可用时间
        disable_date: "", //禁用日期
      },
      dis_day_list: [], //禁用日期列表
      current_dis_day: "", //当前选择的日期
      oldInfoData: {}, //修改前的数据
      oldGoodsData: {},
      oldStoreData: {},
      oldTimeData: {},
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateOneMonth(),
      pickerTimeForm: pickerOptionsGtDay(),
      rules: {
        name: [{ required: false, validator: vName, trigger: "blur" }],
        describe: [{ required: false, validator: vDes, trigger: "blur" }],
        pay_money1: [{ required: false, validator: vPmoney1, trigger: "blur" }],
        pay_score: [{ required: false, validator: vScore, trigger: "blur" }],
        pay_money: [{ type: 'array', required: true, validator: vPmoney, trigger: 'change' }],
        typeA: [
          { type: 'array', required: true, validator: vType, trigger: 'change' }
        ],
        discount_money: [
          { required: false, validator: vMoney1, trigger: "blur" },
        ],
        threshold: [{ required: false, validator: vMoney0, trigger: "blur" }],
        priority: [{ required: false, validator: vPri, trigger: "blur" }],
        intime: [{ required: false, validator: vIntime, trigger: "blur" }],
        week_day: [{ required: false, validator: vWeekDay, trigger: "change" }],
      },
    };
  },
  created() {
    this.getstore();
  },
  methods: {
    getstore() {
      getStore({ category_id: 677 }).then((response) => {
        let list = [];
        response.forEach((val) => {
          list.push({ id: val.id, name: val.name, disabled: false });
        });
        this.choose_store_list = list;
        if (response.length > 1) {
          response.unshift({ id: "0", name: "全部" });
        }
        this.store_list = response;
        let data = response.filter(
          (res) => res.id == this.$store.getters.optionId
        );
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
          this.goodsForm.store_id = data[0].id;
          this.default_store_id = data[0].id;
        }
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        if (this.status.length == 0) {
          this.$message.error("请至少选择一种状态");
          return;
        }
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : "";
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : "";
        this.formInline.status = this.status;
        this.fetchData();
      });
    },
    goSale(i, id) {
      this.$router.push({
        name: "operation/sales_management",
        params: { id, isNew: i, routerflag: 1 },
      });
    },
    // 更新时间排序
    tableSort({ column, prop, order }) {
      this.formInline.sort_by = order === "descending" ? "desc" : "asc";
      this.searchClick();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.list = [];
      getPage(this.formInline)
        .then((response) => {
          this.totalDataNumber = response.data.count / 1;
          if (this.totalDataNumber == 0) {
            this.listLoading = false;
          } else {
            getList(this.formInline)
              .then((res) => {
                this.listLoading = false;
                this.list = res.data;
              })
              .catch((res) => {
                this.listLoading = false;
              });
          }
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      getList(this.formInline, val)
        .then((res) => {
          this.listLoading = false;
          this.list = res.data;
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    // 新增券选择弹窗
    addTypeClick() {
      this.addTypeDialog = true;
      this.infoForm.pay_score="";
      this.infoForm.pay_money="";
    },
    backClick() {
      if (this.isNew < 3 && !this.isDisabled) {
        this.$confirm(
          "返回后已修改的数据不会保存，是否放弃本次操作？",
          "提示",
          { type: "warning" }
        ).then(() => {
          this.goBack();
        });
      } else {
        this.goBack();
      }
    },
    goBack() {
      this.$refs.infoForm.resetFields();
      this.goodsRadio = "0";
      this.isSelled = false;
      this.add_goods_list = [];
      this.goodsType = [];
      this.choose_goods_list = [];
      this.all_goods_list.forEach((val) => {
        val.isCheck = 0;
      });
      this.$refs.allGoodsList.clearSelection();
      this.$refs.goodsForm.resetFields();
      this.goodsForm.store_id = this.default_store_id;
      this.goods_type = ["2", "3", "4", "5", "6", "7"];
      this.storeRadio = "";
      this.check_store_list = [];
      this.choose_store_list.forEach((val) => (val.disabled = false));
      this.goods_type_list.forEach((val) => (val.disabled = false));
      this.timeRadio = "1";
      this.$refs.timeForm.resetFields();
      this.timeForm.disable_date = "";
      this.tab_view = 1;
      this.id = "";
      this.update_time = "";
      this.searchClick();
    },
    addClick(id) {
      if (id == 1) {
        this.infoForm.second_type = id;
        this.addTypeDialog = false;
        this.isDisabled = false;
        this.isNew = 1;
        this.tab_view = 2;
        this.tab_step = 1;
        this.top_title = "新增代金券";
      } else {
        this.$message.info("暂不支持");
      }
    },
    // i 3详情  2修改
    infoClick(i, coupons_id, second_type) {
      this.isNew = i;
      this.top_title = i == 2 ? "修改代金券" : "代金券详情";
      this.tab_view = 2;
      this.tab_step = 1;
      this.infoForm.second_type = second_type;
      this.isDisabled = true;
      couponsInfo({ coupons_id }).then((res) => {
        if (res.code == 1) {
          let data = res.data;
          this.id = data.id;
          this.update_time = data.update_time;
          //是否销售过
          this.isSelled = data.is_selled == 1;
          // 1
          this.infoForm.name = data.name;
          this.infoForm.describe = data.describe;
          this.infoForm.pay_score = data.pay_score;
          this.infoForm.support_score = data.support_score;
          data.support_score!=0?this.infoForm.typeA.push("积分兑换"):"";
          this.infoForm.pay_money = (data.pay_money / 100).toFixed(2);
          this.infoForm.support_buy = data.support_buy;
          data.support_buy!=0?this.infoForm.typeA.push("现金购买"):"";
          this.infoForm.discount_money = (data.discount_money / 100).toFixed(2);
          this.infoForm.threshold = (data.threshold / 100).toFixed(2);
          this.infoForm.priority = data.priority;
          this.infoForm.tab = data.tab === "0" ? [] : data.tab.split(",");
          this.infoForm.corner_mark = data.corner_mark;
          this.oldInfoData = JSON.stringify(this.infoForm);
          // 2
          this.goodsRadio =
            data.chose_goods_type === "0" || data.chose_goods_type === "1"
              ? data.chose_goods_type
              : "2";
          this.goodsType =
            data.chose_goods_type === "0" || data.chose_goods_type === "1"
              ? []
              : data.chose_goods_type.split(",");
          if (this.goodsRadio === "1") {
            data.goods_list &&
              data.goods_list.forEach((val) => {
                val.isCheck = 1;
                val.isOld = 1;
              });
            this.add_goods_list = data.goods_list ? data.goods_list : [];
          }
          this.oldGoodsData = {
            goodsRadio: this.goodsRadio,
            goodsType: JSON.stringify(this.goodsType),
            addGoodsList: JSON.parse(JSON.stringify(this.add_goods_list)),
          };
          // 3
          this.storeRadio = data.chose_store_type;
          data.store_list &&
            data.store_list.forEach((val) => {
              this.check_store_list.push(val.store_id);
            });
          this.oldStoreData = {
            storeRadio: this.storeRadio,
            check_store_list: JSON.stringify(this.check_store_list),
          };
          // 4
          this.timeRadio = data.chose_time_type;
          this.timeForm.pickerTime =
            this.timeRadio == 1
              ? data.effect_time.split(",")
              : this.timeForm.pickerTime;
          this.timeForm.intime = this.timeRadio == 1 ? "" : data.effect_time;
          this.timeForm.week = !data.week_day == "";
          this.timeForm.week_day = data.week_day
            ? data.week_day.split(",")
            : [];
          this.timeForm.time = !data.clock_time == "";
          this.timeForm.clock_time = data.clock_time
            ? data.clock_time.split(",")
            : this.timeForm.clock_time;
          this.timeForm.dis_day = !data.disable_date == "";
          this.timeForm.disable_date = this.timeForm.dis_day
            ? data.disable_date.replace(/,/g, "，")
            : "";
          this.oldTimeData = JSON.stringify(this.timeForm);
        }
      });
    },
    verify() {
      if (this.tab_view == 1) {
        return;
      }
      let isPass = false;
      if (this.tab_step == 1) {
        this.$refs.infoForm.validate((valid) => {
          isPass = valid;
        });
      } else if (this.tab_step == 2) {
        if (
          (this.goodsRadio === "1" && this.add_goods_list.length == 0) ||
          (this.goodsRadio === "2" && this.goodsType.length == 0)
        ) {
          this.$message.error("请添加适用商品");
          isPass = false;
        } else {
          isPass = true;
        }
      } else if (this.tab_step == 3) {
        if (
          !this.storeRadio ||
          (this.storeRadio === "2" && this.check_store_list.length == 0)
        ) {
          this.$message.error("请选择使用门店");
          isPass = false;
        } else {
          isPass = true;
        }
      } else if (this.tab_step == 4) {
        this.$refs.timeForm.validate((valid) => {
          if (this.timeForm.dis_day && !this.timeForm.disable_date) {
            this.$message.error("请选择禁用日期");
            isPass = false;
          } else {
            isPass = valid;
          }
        });
      }
      return isPass;
    },
    goNext() {
      if (!this.verify()) {
        return;
      }
      this.tab_step++;
      if (this.tab_step == 2 && this.all_goods_list.length == 0) {
        this.goodsSearchClick();
      }
    },
    goStep(i) {
      if (this.isNew == 1) {
        return;
      }
      if (!this.isDisabled) {
        this.$confirm(
          "该页面尚未保存，是否要切换页面？切换后修改后的数据不会保存",
          "提示",
          { type: "warning" }
        ).then(() => {
          this.isDisabled = true;
          this.tab_step = i;
        });
      } else {
        this.tab_step = i;
        if (i == 2) {
          this.goodsSearchClick();
        }
      }
    },
    //  角标
    cornerClick(i) {
      if (this.isNew == 3 || this.isDisabled) {
        return;
      }
      this.infoForm.corner_mark = this.infoForm.corner_mark == i ? "" : i;
    },
    goodsRadioChange(i) {
      this.goodsType = [];
      this.add_goods_list = [];
      this.all_goods_list.forEach((val) => {
        val.isCheck = 0;
        this.$refs.allGoodsList.toggleRowSelection(val, false);
      });
    },
    //商品搜索
    goodsSearchClick() {
      this.goodsForm.second_type = this.goods_type;
      this.getGoods();
    },
    getGoodsData(data) {
      this.notSelect = true;
      data.forEach((val) => {
        val.type_name = getGoodsType(val.second_type);
        val.isOld = 0;
        val.isCheck = 0;
        for (let item of this.add_goods_list) {
          if (item.goods_id == val.goods_id) {
            val.isCheck = 1;
            val.isOld =
              this.oldGoodsData.addGoodsList &&
              this.oldGoodsData.addGoodsList.findIndex(
                (el) => el.goods_id == val.goods_id
              ) > -1
                ? 1
                : 0;
            break;
          }
        }
      });
      this.all_goods_list = data;
      this.$nextTick(() => {
        this.all_goods_list.forEach((val) => {
          if (val.isCheck === 1) {
            this.$refs.allGoodsList.toggleRowSelection(val, true);
          }
        });
        this.notSelect = false;
      });
    },
    getGoods() {
      getGoodsPage(this.goodsForm)
        .then((response) => {
          this.goodsTotal = response.data.count / 1;
          if (this.goodsTotal == 0) {
            this.all_goods_list = [];
            this.listLoading = false;
          } else {
            getGoodsList(this.goodsForm)
              .then((res) => {
                this.listLoading = false;
                this.getGoodsData(res.data);
              })
              .catch((res) => {
                this.listLoading = false;
              });
          }
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    goodsCurrentChange(val) {
      getGoodsList(this.goodsForm, val)
        .then((res) => {
          this.listLoading = false;
          this.getGoodsData(res.data);
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    //选择商品
    goodsSelect(row) {
      this.choose_goods_list = row;
      if (this.notSelect) {
        return;
      }
      this.all_goods_list.forEach((val) => {
        val.isCheck = 0;
        for (let item of row) {
          if (item.goods_id == val.goods_id) {
            val.isCheck = 1;
          }
        }
      });
      row.forEach((val) => {
        var index = this.add_goods_list.findIndex(
          (item) => item.goods_id == val.goods_id
        );
        if (index === -1) {
          this.add_goods_list.push({
            goods_id: val.goods_id,
            name: val.name,
            isCheck: 1,
            isOld:
              this.oldGoodsData.addGoodsList &&
              this.oldGoodsData.addGoodsList.findIndex(
                (el) => el.goods_id == val.goods_id
              ) > -1
                ? 1
                : 0,
          });
        }
      });
      this.all_goods_list.forEach((val) => {
        for (let i in this.add_goods_list) {
          if (
            val.isCheck == 0 &&
            val.goods_id == this.add_goods_list[i].goods_id
          ) {
            this.add_goods_list.splice(i, 1);
            break;
          }
        }
      });
    },
    // 移除已添加商品
    delCheck(i, canDel) {
      if (canDel) {
        return;
      }
      let del = this.add_goods_list.splice(i, 1)[0];
      this.all_goods_list.forEach((val) => {
        if (val.goods_id == del.goods_id) {
          this.$refs.allGoodsList.toggleRowSelection(val, false);
        }
      });
    },
    goodsSelectable(row, index) {
      if (this.isDisabled || (this.isSelled && row.isOld == 1)) {
        return false;
      } else {
        return true;
      }
    },
    storeRadioChange(i) {
      if (i === "0" || i === "1") {
        this.check_store_list = [];
      }
    },
    timeRadioChange(val) {
      if (val === "1") {
        this.timeForm.intime = "";
        this.$refs.intimeForm.clearValidate();
      } else {
        this.timeForm.pickerTime = pickerDateDot();
      }
    },
    weekChange(val) {
      if (!val) {
        this.timeForm.week_day = [];
        this.$refs.weekDayForm.clearValidate();
      }
    },
    timeChange(val) {
      if (!val) {
        this.timeForm.clock_time = ["00:00:00", "23:59:59"];
      }
    },
    disDayChange(val) {
      if (!val) {
        this.timeForm.disable_date = "";
        this.dis_day_list = [];
      }
    },
    //不可用日期弹窗
    editDisDayClick() {
      this.current_dis_day = "";
      this.dis_day_list = this.timeForm.disable_date
        ? this.timeForm.disable_date.split("，")
        : [];
      this.disDayDialog = true;
    },
    //添加不可用日期
    addDisDayClick() {
      if (this.current_dis_day) {
        let index = this.dis_day_list.findIndex(
          (val) => val == this.current_dis_day
        );
        if (index == -1) {
          this.dis_day_list.push(this.current_dis_day);
        }
        this.current_dis_day = "";
      } else {
        this.$message.error("请选择日期");
      }
    },
    //移除不可用日期
    delDisDay(i) {
      this.dis_day_list.splice(i, 1);
    },
    //清空不可用日期
    clearAllDisDay() {
      this.dis_day_list = [];
    },
    confirmDisDay() {
      this.dis_day_list.sort(
        (a, b) => new Date(a).getTime() - new Date(b).getTime()
      );
      this.timeForm.disable_date = this.dis_day_list.join("，");
      this.disDayDialog = false;
    },
    saveClick() {
      if (!this.verify()) {
        return;
      }
      this.$confirm(
        "请确保信息内容设置无误，保存后部分信息将不能修改，是否继续？",
        "提示",
        {
          confirmButtonText: "确定继续",
          cancelButtonText: "返回修改",
          showClose: false,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          type: "warning",
        }
      ).then(() => {
        this.save();
      });
    },
    save() {
      // 1
      let data = JSON.parse(JSON.stringify(this.infoForm));
      data.pay_money *= 100;
      data.discount_money *= 100;
      data.threshold *= 100;
      if(data.typeA.includes("现金购买")){
        data.support_buy=1;
      }else{
        data.support_buy=0;
        data.pay_money="";
      }
      if(data.typeA.includes("积分兑换")){
        data.support_score=1;
      }else{
        data.support_score=0;
        data.pay_score="";
      }
      data.tab = data.tab.join();
      // 2
      data.chose_goods_type =
        this.goodsRadio === "0" || this.goodsRadio === "1"
          ? this.goodsRadio
          : this.goodsType.join();
      let goods_list = "";
      if (this.goodsRadio === "1") {
        this.add_goods_list.forEach((val) => {
          goods_list += val.goods_id + ",";
        });
      }
      data.goods_list =
        this.goodsRadio === "1"
          ? goods_list.substr(0, goods_list.length - 1)
          : "";
      // 3
      data.chose_store_type = this.storeRadio;
      data.store_list =
        this.storeRadio === "0" || this.storeRadio === "1"
          ? ""
          : this.check_store_list.join();
      // 4
      data.chose_time_type = this.timeRadio;
      data.effect_time =
        this.timeRadio === "1"
          ? this.timeForm.pickerTime.join()
          : this.timeForm.intime;
      data.week_day = this.timeForm.week ? this.timeForm.week_day.join() : "";
      data.clock_time = this.timeForm.time
        ? this.timeForm.clock_time.join()
        : "";
      data.disable_date = this.timeForm.dis_day
        ? this.timeForm.disable_date.replace(/，/g, ",")
        : "";
      couponsCreate({ data }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.message);
          this.$confirm("创建成功，是否新建销售设置？", "提示", {
            confirmButtonText: "前往设置",
            cancelButtonText: "返回列表",
            showClose: false,
            closeOnClickModal: false,
            closeOnPressEscape: false,
            type: "warning",
          })
            .then(() => {
              this.goBack();
              this.goSale(1, res.data);
            })
            .catch(() => {
              this.goBack();
            });
        }
      });
    },
    editClick(i) {
      if (i == 1) {
        this.isDisabled = true;
        if (this.tab_step == 1) {
          this.infoForm = JSON.parse(this.oldInfoData);
        } else if (this.tab_step == 2) {
          this.goodsRadio = this.oldGoodsData.goodsRadio;
          this.goodsType = JSON.parse(this.oldGoodsData.goodsType);
          if (this.goodsRadio === "1") {
            this.notSelect = true;
            this.add_goods_list = JSON.parse(
              JSON.stringify(this.oldGoodsData.addGoodsList)
            );
            this.all_goods_list.forEach((val) => {
              let index = this.add_goods_list.findIndex(
                (item) => item.goods_id == val.goods_id
              );
              if (index > -1) {
                this.$refs.allGoodsList.toggleRowSelection(val, true);
              } else {
                this.$refs.allGoodsList.toggleRowSelection(val, false);
              }
            });
            this.notSelect = false;
          }
        } else if (this.tab_step == 3) {
          this.storeRadio = this.oldStoreData.storeRadio;
          let store_list = JSON.parse(JSON.stringify(this.choose_store_list));
          //   console.log(store_list);
          this.choose_store_list = [];
          this.choose_store_list = store_list;
          this.check_store_list = JSON.parse(
            this.oldStoreData.check_store_list
          );
        } else if (this.tab_step == 4) {
          let data = JSON.parse(this.oldTimeData);
          this.timeRadio = data.intime == "" ? "1" : "2";
          this.timeForm = data;
        }
      } else if (i == 2) {
        if (!this.verify()) {
          return;
        }
        let data = {
          coupons_id: this.id,
          steps: this.tab_step,
          update_time: this.update_time,
          data: {},
        };
        if (this.tab_step == 1) {
          if (this.oldInfoData == JSON.stringify(this.infoForm)) {
            this.isDisabled = true;
            return;
          }
          let obj = JSON.parse(JSON.stringify(this.infoForm));
          obj.pay_money *= 100;
          obj.discount_money *= 100;
          obj.threshold *= 100;
          if(obj.typeA.includes("现金购买")){
            obj.support_buy=1;
          }else{
            obj.support_buy=0;
            obj.pay_money="";
          }
          if(obj.typeA.includes("积分兑换")){
            obj.support_score=1;
          }else{
            obj.support_score=0;
            obj.pay_score="";
          }
          obj.tab = obj.tab.join();
          data.data = obj;
        } else if (this.tab_step == 2) {
          if (
            this.oldGoodsData.goodsRadio == this.goodsRadio &&
            this.oldGoodsData.goodsType == JSON.stringify(this.goodsType) &&
            JSON.stringify(this.oldGoodsData.addGoodsList) ==
              JSON.stringify(this.add_goods_list)
          ) {
            this.isDisabled = true;
            return;
          }
          data.data.chose_goods_type =
            this.goodsRadio === "0" || this.goodsRadio === "1"
              ? this.goodsRadio
              : this.goodsType.join();
          let goods_list = "";
          if (this.goodsRadio === "1") {
            this.add_goods_list.forEach((val) => {
              goods_list += val.goods_id + ",";
            });
          }
          data.data.goods_list =
            this.goodsRadio === "1"
              ? goods_list.substr(0, goods_list.length - 1)
              : "";
        } else if (this.tab_step == 3) {
          if (
            this.oldStoreData.storeRadio == this.storeRadio &&
            this.oldStoreData.check_store_list ==
              JSON.stringify(this.check_store_list)
          ) {
            this.isDisabled = true;
            return;
          }
          data.data.chose_store_type = this.storeRadio;
          data.data.store_list =
            this.storeRadio === "0" || this.storeRadio === "1"
              ? ""
              : this.check_store_list.join();
        } else if (this.tab_step == 4) {
          if (this.oldTimeData == JSON.stringify(this.timeForm)) {
            this.isDisabled = true;
            return;
          }
          data.data.chose_time_type = this.timeRadio;
          data.data.effect_time =
            this.timeRadio === "1"
              ? this.timeForm.pickerTime.join()
              : this.timeForm.intime;
          data.data.week_day = this.timeForm.week
            ? this.timeForm.week_day.join()
            : "";
          data.data.clock_time = this.timeForm.time
            ? this.timeForm.clock_time.join()
            : "";
          data.disable_date = this.timeForm.dis_day
            ? this.timeForm.disable_date.replace(/，/g, ",")
            : "";
        } else {
          this.$message.error("操作失败，请返回重试");
          return;
        }
        couponsUpdate(data).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.message);
            this.isDisabled = true;
            if (this.tab_step == 1) {
              this.oldInfoData = JSON.stringify(this.infoForm);
            } else if (this.tab_step == 2) {
              if (this.goodsRadio === "1") {
                this.add_goods_list.forEach((val) => {
                  val.isOld = 1;
                });
              }
              this.oldGoodsData = {
                goodsRadio: this.goodsRadio,
                goodsType: JSON.stringify(this.goodsType),
                addGoodsList: JSON.parse(JSON.stringify(this.add_goods_list)),
              };
            } else if (this.tab_step == 3) {
              this.oldStoreData = {
                storeRadio: this.storeRadio,
                check_store_list: this.check_store_list,
              };
            } else if (this.tab_step == 4) {
              this.oldTimeData = JSON.stringify(this.timeForm);
            }
          }
        });
      } else {
        this.isDisabled = false;
        if (this.tab_step == 2 && this.isSelled) {
          this.goodsType.forEach((val) => {
            this.goods_type_list.forEach((item) => {
              if (item.id == val) {
                item.disabled = true;
              }
            });
          });
        } else if (this.tab_step == 3) {
          this.choose_store_list.forEach((val) => {
            val.disabled = false;
            this.isSelled &&
              this.check_store_list.forEach((item) => {
                if (item == val.id) {
                  val.disabled = true;
                }
              });
          });
        }
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.customContainer {
  overflow-y: auto;
}
.info {
  background: #fff;
  padding: 30px 0 10px;
  margin-bottom: 20px;
}
.goods {
  padding: 30px 30px 10px;
  .goods_info {
    margin: 20px 0;
    .title {
      color: #606266;
      margin-bottom: 5px;
    }
  }
  .goods_table {
    margin-bottom: 15px;
  }
  .goods_type {
    margin: 50px 0 180px;
  }
  .store_info {
    margin: 50px 0 180px;
    color: #bbb;
    font-size: 16px;
  }
  .store_choose {
    min-width: 960px;
    margin-bottom: 30px;
  }
  .time_info {
    margin: 20px 0 0 20px;
    .remark {
      color: #606266;
      margin-top: 10px;
    }
    .intime {
      display: flex;
      .intime_item {
        margin: 0 10px;
      }
    }
    .dis_day_text {
      line-height: 25px;
      color: #606266;
    }
  }
  .time_title {
    margin-bottom: 10px;
  }
  .time_item {
    margin-top: 0;
    font-size: 14px;
  }
}
.add_type {
  display: flex;
  justify-content: space-around;
  .add_type_info {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  .add_type_info:hover {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
  }
}
.tab_title {
  width: 200px;
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0 20px 70px;
}

div.check_meal {
  border: 1px solid #ccc;
  padding: 10px 10px 0;
  margin-bottom: 20px;
  height: 85px;
  overflow: auto;
  div.check_meal_list {
    display: flex;
    flex-wrap: wrap;
    div.check_meal_item {
      font-size: 12px;
      border: 1px solid #409eff;
      color: #409eff;
      border-radius: 5px;
      padding: 3px 5px;
      margin: 0 10px 10px 0;
      position: relative;
      .el-icon-close {
        font-size: 14px;
        margin-left: 5px;
        padding: 2px;
        cursor: pointer;
        &:hover {
          background-color: #409eff;
          color: #fff;
          border-radius: 50%;
        }
      }
    }
    div.check_meal_item.old {
      color: #fff;
      background: #409eff;
      .el-icon-close {
        &:hover {
          background-color: #fff;
          color: #409eff;
        }
      }
    }
    div.check_meal_item.disabled {
      border-color: #b3b3b3;
      background: #dbdbdb;
      color: #a2a2a2;
      .el-icon-close {
        cursor: not-allowed;
        &:hover {
          background-color: #dbdbdb;
          color: #a2a2a2;
        }
      }
    }
  }
}
div.check_meal.dis_day {
  margin-bottom: 0;
}
.dis_day_btn {
  margin-bottom: 20px;
}
.transferHeader {
  width: 400px;
  margin-top: 30px;
  display: inline-block;
}
.transferHeader + .transferHeader {
  margin-left: 145px;
}
.info_optional {
  padding: 0 20px;
  .op_title {
    margin: 30px 0 20px;
    font-size: 16px;
    font-weight: bold;
    color: #282828;
    border-bottom: 1px solid #dcdfe6;
  }
}
// .info /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
//     background-color: #409EFF;
//     border-color: #409EFF;
// }
// .info /deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner  {
//     background-color: #409EFF;
//     border-color: #409EFF;
// }
</style>
